<template>
  <div>
    <CustomContent>
      <template v-slot:body>
        <div v-if="show('1')" class="app-car-container">
          <MmvTitle title="租金"></MmvTitle>
          <el-row>
            <div class="item-title">费用信息</div>
            <el-table :data="rentDetail" :span-method="objectSpanMethod" border>
              <el-table-column label="" align="center" prop="name"/>
              <el-table-column label="收费项名称" align="center" prop="chargeProjectName"/>
              <el-table-column label="单价" align="center" prop="unitPrice">
                <template slot-scope="{ row }">
                <span v-if="row.isRent==1">
                日均:{{ row.unitPrice }}元

                  <el-popover placement="right" trigger="click">
                        <div class="ant-popover-inner-content">
                          <div class="fee-detail-wrapper">
                            <div class="day-item" v-for="(item,index) in orderPriceCalendars" :key="index">
                                <div class="date-weekname">
                                  <div>{{ item.sameDay }}</div>
                                  <div>{{ item.dateOfWeek|dateOfWeek }}</div>
                                </div>
                                <div class="price-color word-break">¥{{ item.price }}</div>
                            </div>
                          </div>
                        </div>
                    <el-button slot="reference" icon="el-icon-search" type="text"  size="mini">明细</el-button>
                  </el-popover>


                </span>
                  <span v-else>
                {{ row.unitPrice }}元
              </span>
                </template>
              </el-table-column>
              <el-table-column label="收费类型" align="center" prop="chargeItemsType">
                <template slot-scope="{ row }">
                  <dict-tag :options="dict.type.charge_type" :value="row.chargeItemsType"/>
                </template>
              </el-table-column>
              <el-table-column label="数目" align="center" prop="number"/>
              <el-table-column label="费用" align="center" prop="chargeMoney"/>
            </el-table>
          </el-row>

          <el-row>
            <paymentInformation :type="1" :chargingItems="rentItemsVo" @addChargingItems="addChargingItems" @deleteChargingItems="deleteChargingItems"></paymentInformation>
          </el-row>
        </div>
        <div v-if="show('2')" class="app-car-container">
          <MmvTitle title="车辆押金"></MmvTitle>
          <el-row>
            <el-col :span="12">
              <div class="item-title">费用信息</div>
              <el-descriptions class="margin-top" :column="1" border>
                <el-descriptions-item label-class-name="my-descriptions-label"  label="应收合计" :labelStyle="{width:'200px'}">{{depositDetail.cost||0}}</el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label"  label="已付" :labelStyle="{width:'200px'}">{{depositDetail.paidAmount||0}}</el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label"  label="待付" :labelStyle="{width:'200px'}">{{depositDetail.unpaidAmount||0}}</el-descriptions-item>
              </el-descriptions>
            </el-col>

          </el-row>

          <el-row>
            <paymentInformation :type="2" :chargingItems="depositItemsVo" @addChargingItems="addChargingItems" @deleteChargingItems="deleteChargingItems"></paymentInformation>
          </el-row>
        </div>
        <div v-if="show('3')" class="app-car-container">
          <MmvTitle title="违章押金"></MmvTitle>
          <el-row>
            <el-col :span="12">
              <div class="item-title">费用信息</div>
              <el-descriptions class="margin-top" :column="1" border>
                <el-descriptions-item label-class-name="my-descriptions-label"  label="应收合计" :labelStyle="{width:'200px'}">{{illegalDetail.cost||0}}</el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label"  label="已付" :labelStyle="{width:'200px'}">{{illegalDetail.paidAmount||0}}</el-descriptions-item>
                <el-descriptions-item label-class-name="my-descriptions-label"  label="待付" :labelStyle="{width:'200px'}">{{illegalDetail.unpaidAmount||0}}</el-descriptions-item>
              </el-descriptions>
            </el-col>

          </el-row>

          <el-row>
            <paymentInformation :type="3" :chargingItems="illegalItemsVo" @addChargingItems="addChargingItems" @deleteChargingItems="deleteChargingItems"></paymentInformation>
          </el-row>
        </div>
        <div v-if="show('7')" class="app-car-container">
          <MmvTitle title="续租费用"></MmvTitle>
          <el-row>
            <div class="item-title">费用信息</div>
            <el-table :data="renewRecord" :span-method="objectSpanMethod2" border>
              <el-table-column label="" align="center" prop="name"/>
              <el-table-column label="收费项名称" align="center" prop="chargeProjectName"/>
              <el-table-column label="原预定日期" align="center" prop="beforeTime" />
              <el-table-column label="续租日期" align="center" prop="afterTime"/>
              <el-table-column label="续租时长" align="center" prop="renewDays">
                <template slot-scope="{ row }">
                  <div>{{ row.renewDays||0 }}天</div>
                </template>
              </el-table-column>
              <el-table-column label="续租总金额" align="center" prop="renewCost" >
                <template slot-scope="{ row }">
                  <div>¥{{ row.renewCost||0 }}元 <el-button icon="el-icon-search" type="text" v-if="row.id"  size="mini" @click="renewRecordDetail(row)">明细</el-button></div>
                </template>
              </el-table-column>

<!--              <el-table-column label="操作" width="150" fixed="right" align="center">-->
<!--                <template slot-scope="{ row }">-->
<!--                  <el-button type="text" size="mini" @click="renewRecordDetail(row)" >查看明细</el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>
          </el-row>
          <el-row>
            <paymentInformation :type="7" :chargingItems="renewalItemsVo" @addChargingItems="addChargingItems" @deleteChargingItems="deleteChargingItems"></paymentInformation>
          </el-row>
        </div>
        <div v-if="show('15')" class="app-car-container">
          <MmvTitle title="车损费用"></MmvTitle>
          <el-row>
            <div class="item-title">费用信息</div>
            <el-table :data="returnRecord" border>
              <el-table-column label="收费项名称" align="center" prop="name"/>
              <el-table-column label="费用" align="center" prop="renewCost"/>
            </el-table>
          </el-row>
          <el-row>
            <paymentInformation :type="15" :chargingItems="vehicleReturnFee" @addChargingItems="addChargingItems" @deleteChargingItems="deleteChargingItems"></paymentInformation>
          </el-row>
        </div>
        <div v-if="show('16')" class="app-car-container">
          <MmvTitle title="违章费用"></MmvTitle>
          <el-row>
            <div class="item-title">费用信息</div>
            <el-table :data="violationRecord" border :span-method="objectSpanMethod3">
              <el-table-column label="违章单据号" align="center" prop="documentNo"/>
              <el-table-column label="罚款" align="center" prop="illegalFines"/>
              <el-table-column label="扣分" align="center" prop="pointsDeduction"/>
              <el-table-column label="违章手续费" align="center" prop="illegalPoundage"/>
              <el-table-column label="处理状态" align="center" prop="processingStatus">
                <template slot-scope="{row}">
                  {{ {1:'未处理',2:'已处理未缴费',3:'已处理',4:'已缴费未处理'}[Number(row.processingStatus)] }}
                </template>
              </el-table-column>
              <el-table-column label="违章服务费" align="center" prop="deductions"/>
            </el-table>
          </el-row>
          <el-row>
            <paymentInformation :type="16" :chargingItems="violationExpenses" @addChargingItems="addChargingItems" @deleteChargingItems="deleteChargingItems"></paymentInformation>
          </el-row>
        </div>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="primary" @click.native="saveForm" :loading="payLoading">保存</el-button>
          <el-button type="info" plain @click.native="close">取消</el-button>
        </div>
      </template>
    </CustomContent>

    <el-dialog title="续租费用详情" :visible.sync="showRecordDetail" width="1000px" destroy-on-close append-to-body>
      <el-table :data="renewRecordDetailData.orderChargingItems"  border>
        <el-table-column label="收费项名称" align="center" prop="chargeProjectName"/>
        <el-table-column label="单价" align="center" prop="unitPrice">
          <template slot-scope="{ row }">
            <span v-if="row.isRent==1">
            日均:{{ row.unitPrice }}元

              <el-popover placement="right" trigger="click">
                    <div class="ant-popover-inner-content">
                      <div class="fee-detail-wrapper">
                        <div class="day-item" v-for="(item,index) in renewRecordDetailData.orderPriceCalendars" :key="index">
                            <div class="date-weekname">
                              <div>{{ item.sameDay }}</div>
                              <div>{{ item.dateOfWeek|dateOfWeek }}</div>
                            </div>
                            <div class="price-color word-break">¥{{ item.price }}</div>
                        </div>
                      </div>
                    </div>
                <el-button slot="reference" icon="el-icon-search" type="text" size="mini">明细</el-button>
              </el-popover>


            </span>
            <span v-else>
            {{ row.unitPrice }}元
          </span>
          </template>
        </el-table-column>
        <el-table-column label="收费类型" align="center" prop="chargeItemsType">
          <template slot-scope="{ row }">
            <dict-tag :options="dict.type.charge_type" :value="row.chargeItemsType"/>
          </template>
        </el-table-column>
        <el-table-column label="数目" align="center" prop="number"/>
        <el-table-column label="费用" align="center" prop="chargeMoney"/>
      </el-table>

      <div slot="footer">
        <el-button @click="showRecordDetail = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import {getUserProfile} from "@/api/system/user";
import * as api from "@/api/order";
import CustomContent from "@/components/custom/content";
import PaymentInformation from "./components/paymentInformation";

export default {
  name: "OrderPayRecord",
  components: {
    CustomContent,
    MmvTitle,
    PaymentInformation
  },
  dicts: ['charge_type', 'sys_pay_way'],
  data() {
    return {
      //费用信息
      rentDetail: [],
      orderPriceCalendars: [],
      depositDetail: {},
      illegalDetail: {},
      renewRecord: [],
      returnRecord: [],
      violationRecord: [],
      showRecordDetail: false,

      renewRecordDetailData: {},
      //付款信息
      rentItemsVo: [],///收取租金
      depositItemsVo: [], //收取押金
      illegalItemsVo: [],//收取违章押金
      renewalItemsVo: [],//收取违章押金
      vehicleReturnFee: [],//收取还车产生费用
      violationExpenses: [],//收取违章费用
      depositSupplementary: [],//押金结算补缴金额
      illegalSupplementary: [],//违章押金结算补缴金额

      userName: null,
      settlementMethod: 1,
      source: 1,
      orderNo: null,
      types: [],
      loading: true,
      payLoading: false
    }
  },
  filters: {
    dateOfWeek(val) {
      return {
        1: '星期一',
        2: '星期二',
        3: '星期三',
        4: '星期四',
        5: '星期五',
        6: '星期六',
        7: '星期日',
      }[Number(val)] || '';
    },
  },
  mounted() {
    console.log(this.$route.params)
    this.orderNo = this.$route.params.orderNo
    this.source = Number(this.$route.params.source)||1
    let types = this.$route.params.types
    this.types=types.split(",");

    this.getUser()
  },
  methods: {
    /** 提交订单 */
    saveForm() {
      let allItem=
      [].concat(this.rentItemsVo)
        .concat(this.depositItemsVo)
        .concat(this.illegalItemsVo)
        .concat(this.renewalItemsVo)
        .concat(this.vehicleReturnFee)
        .concat(this.violationExpenses)
        .concat(this.depositSupplementary)
        .concat(this.illegalSupplementary);
      for (let item of allItem) {
        if(!item.payWay){
          this.$modal.msgError('请选择支付方式')
          return;
        }
        if(Number(item.paidAmount)===0){
          this.$modal.msgError('收款金额不能小于0.01')
          return;
        }
        if(!item.paidAmount){
          this.$modal.msgError('收款金额不能为空')
          return;
        }
        if(!item.paidTime){
          this.$modal.msgError('收款时间不能为空')
          return;
        }
        if(!item.operator){
          this.$modal.msgError('经办人不能为空')
          return;
        }
      }
      this.payLoading = true;
      api.paymentOfFees({
        orderNo:this.orderNo,
        source:this.source,
        rentItemsVo:this.rentItemsVo,
        depositItemsVo:this.depositItemsVo,
        illegalItemsVo:this.illegalItemsVo,
        renewalItemsVo:this.renewalItemsVo,
        vehicleReturnFee:this.vehicleReturnFee,
        violationExpenses:this.violationExpenses,
        depositSupplementary:this.depositSupplementary,
        illegalSupplementary:this.illegalSupplementary,
      }).then((response) => {
        this.$modal.msgSuccess('操作成功')
        this.close()
      }).finally(e=>{
        this.payLoading = false;
      })
    },
    show(type) {
      return this.types.indexOf(type)>-1
    },
    close() {
      // 关闭页面
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    },
    getUser() {
      getUserProfile().then(response => {
        this.userName = response.data.userName;
        this.costDetail()
      });
    },
    costDetail() {
      if(this.show('1')){
        api.rentDetail(this.orderNo).then((response) => {
          this.rentDetail = response.data || []
          this.loading = false
          let chargeMoney=this.rentDetail.filter(item=>{
            return item.name=='待付金额'
          })[0].chargeMoney
          this.addChargingItems(1,chargeMoney)
        })

        api.orderPriceCalendars(this.orderNo).then((response) => {
          this.orderPriceCalendars = response.data || []
        })

      }
      if(this.show('2')){
        api.depositDetail(this.orderNo).then((response) => {
          this.depositDetail = response.data || []
          this.loading = false
          this.addChargingItems(2,this.depositDetail.unpaidAmount)
        })
      }
      if(this.show('3')){
        api.illegalDepositDetail(this.orderNo).then((response) => {
          this.illegalDetail = response.data || []
          this.loading = false
          this.addChargingItems(3,this.illegalDetail.unpaidAmount)
        })
      }
      if(this.show('7')){
        api.renewalDetail(this.orderNo).then((response) => {
          this.renewRecord = response.data
          this.loading = false
          let chargeMoney=this.renewRecord.filter(item=>{
            return item.name=='待付'
          })[0].renewCost
          this.addChargingItems(7,chargeMoney)
        })
      }
      if(this.show('15')){
        api.returnRecord(this.orderNo).then((response) => {
          this.returnRecord = response.data
          this.loading = false
          let chargeMoney=this.returnRecord.filter(item=>{
            return item.name=='待付'
          })[0].renewCost
          this.addChargingItems(15,chargeMoney)
        })
      }
      if(this.show('16')){
        api.violationRecord(this.orderNo).then((response) => {
          this.violationRecord = response.data
          this.loading = false
          let chargeMoney=this.violationRecord.filter(item=>{
            return item.documentNo=='待付'
          })[0].deductions
          this.addChargingItems(16,chargeMoney)
        })
      }
    },
    renewRecordDetail(row){
      api.renewRecordDetail( this.orderNo,row.id).then((response) => {
        this.renewRecordDetailData = response.data
        this.showRecordDetail = true
      })
    },
    addChargingItems(type,paidAmount) {
      let item={
        index: new Date().getTime(),
        bizNo: 1,
        type: type,
        payWay: 1,
        payerAccount: null,
        paidAmount: paidAmount||0,
        paidTime: this.parseTime(new Date()),
        operator: this.userName,
        remark: null,
        voucherId: null
      };
      switch (type) {
        case 1:
          this.rentItemsVo.push(item)
          break;
        case 2:
          this.depositItemsVo.push(item)
          break;
        case 3:
          this.illegalItemsVo.push(item)
          break;
        case 7:
          this.renewalItemsVo.push(item)
          break;
        case 15:
          this.vehicleReturnFee.push(item)
          break;
        case 16:
          this.violationExpenses.push(item)
          break;
      }

    },
    deleteChargingItems(index, type) {
      switch (type) {
        case 1:
          this.rentItemsVo.splice(index, 1)
          break;
        case 2:
          this.depositItemsVo.splice(index, 1)
          break;
        case 3:
          this.illegalItemsVo.splice(index, 1)
          break;
        case 7:
          this.renewalItemsVo.splice(index, 1)
          break;
        case 15:
          this.vehicleReturnFee.splice(index, 1)
          break;
        case 16:
          this.violationExpenses.splice(index, 1)
          break;
      }
    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      let rowspan = this.rentDetail.filter(item => {
        return item.type == 1
      }).length
      if (columnIndex === 0) {
        if (rowIndex === 0 && rowIndex < rowspan) {
          return {
            rowspan: rowspan,
            colspan: 1,
          }
        } else if (rowIndex > 0 && rowIndex < rowspan) {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
      if (rowIndex >= rowspan) {
        if (columnIndex === 0) {
          return [1, 1]
        } else if (columnIndex === 5) {
          return [1, 5]
        } else if (columnIndex < 6) {
          return [0, 0]
        }
      }
    },
    objectSpanMethod2({row, column, rowIndex, columnIndex}) {
      let rowspan = this.renewRecord.length-3
      if (columnIndex === 0) {
        if (rowIndex === 0 && rowIndex < rowspan) {
          return {
            rowspan: rowspan,
            colspan: 1,
          }
        } else if (rowIndex > 0 && rowIndex < rowspan) {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
      if (rowIndex >= rowspan) {
        if (columnIndex === 0) {
          return [1, 1]
        } else if (columnIndex === 5) {
          return [1, 5]
        } else if (columnIndex < 6) {
          return [0, 0]
        }
      }
    },
    objectSpanMethod3({row, column, rowIndex, columnIndex}) {
      let rowspan = this.violationRecord.length-4
      if (columnIndex === 0) {
        if (rowIndex === 0 && rowIndex < rowspan) {
          return {
            rowspan: rowspan,
            colspan: 1,
          }
        } else if (rowIndex > 0 && rowIndex < rowspan) {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
      if (rowIndex >= rowspan) {
        if (columnIndex === 0) {
          return [1, 1]
        } else if (columnIndex === 5) {
          return [1, 5]
        } else if (columnIndex < 6) {
          return [0, 0]
        }
      }
    },
  },
}
</script>
<style scoped>
.app-car-container {
  background-color: #FFFFFF;
  margin: 10px;
}

.item-title {
  margin: 10px;
}
.fee-detail-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 420px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  max-height: 400px;
  overflow-y: auto;
}

.day-item {
  width: 80px;
  text-align: center;
  margin-top: 10px;
}

.price-color {
  color: #ff8b26;
}
</style>
